.footer {

  .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;

    svg {
      height: 24px;
      width: 24px;
    }
  }

  .bar-area {
    color: $color1;
    font-size: 12px;
    display: flex;
    padding: 0 20px;
    margin-top: 20px;
    align-items: center;

    .time-start {
      order: 1;
      width: 40px;
    }

    .time-end {
      order: 3;
      width: 40px;
    }

    .bar {
      order: 2;
      flex: 1;
      height: 4px;
      background: #dfc9c988;
      border-radius: 2px;
      margin: 0 10px;

      .progress {
        width: 0%;
        transition: all .2s;
        height: 100%;
        border-radius: 2px;
        background: $color2;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          right: -8px;
          top: -7px;
          display: block;
          width: 16px;
          height: 16px;
          background: url(../bgSvg/progress.svg) 0 0 no-repeat;
          background-size: contain;
        }
      }
    }
  }

  .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
    padding: 0 20px;

    svg {
      width: 28px;
      height: 28px;

      &.btn-play-pause {
        width: 50px;
        height: 50px;
      }
    }
  }
}